import * as echarts from "echarts/core";
import { BarChart, LineChart, ScatterChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  MarkLineComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
  ScatterChart,
  MarkLineComponent,
]);
import { useEffect, useRef } from "react";

type EvaluationChartProps = {
  title: string;
  type: string;
  realResults: number[];
  virtualResults: number[];
  xAxis: string[];
  d1?: number;
  d2?: number;
};

export default function EvaluationChart({
  title,
  type,
  realResults,
  virtualResults,
  xAxis,
  d1,
  d2,
}: EvaluationChartProps) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (type === "gen") {
      const genOption = {
        title: {
          text: title,
        },
        tooltip: { show: true, trigger: "axis" },
        legend: {
          data: ["c2", "c1", "c1 + 5%", "c1 - 5%"],
        },
        xAxis: {
          type: "category",
          data: xAxis,
        },
        yAxis: {
          type: "value",
          min: 0.6,
        },
        series: [
          {
            name: "c2",
            symbolSize: 8,
            type: "scatter",
            data: virtualResults,
            itemStyle: {
              color: "#389e0d",
            },
          },
          {
            name: "c1",
            type: "line",
            data: new Array(virtualResults.length).fill(realResults[0]),
            showSymbol: false,
            color: "#0958d9",
            itemStyle: {
              lineStyle: {
                width: 2,
              },
            },
          },
          {
            name: "c1 + 5%",
            type: "line",
            data: new Array(virtualResults.length).fill(
              (realResults[0] * 1.05).toFixed(6)
            ),
            showSymbol: false,
            color: "#d4b106",
            itemStyle: {
              lineStyle: {
                width: 2,
                type: "dotted",
              },
            },
          },
          {
            name: "c1 - 5%",
            type: "line",
            data: new Array(virtualResults.length).fill(
              (realResults[0] * 0.95).toFixed(6)
            ),
            showSymbol: false,
            color: "#cf1322",
            itemStyle: {
              lineStyle: {
                width: 2,
                type: "dotted",
              },
            },
          },
        ],
      };
      const myChart = echarts.init(ref.current!);
      myChart.setOption(genOption);
      return () => {
        myChart.dispose();
      };
    }
    if (type === "rob") {
      const robOption = {
        title: {
          text: title,
        },
        tooltip: { show: true, trigger: "axis" },
        legend: {
          data: ["标准结果", "测试结果"],
        },
        xAxis: {
          type: "category",
          data: xAxis,
        },
        yAxis: {
          type: "value",
          min: 0.6,
        },
        series: [
          {
            name: "标准结果",
            type: "line",
            showSymbol: false,
            smooth: true,
            data: realResults,
            color: "#0958d9",
            itemStyle: {
              lineStyle: {
                width: 2,
              },
            },
            markLine: {
              symbol: ["none", "none"],
              data: [{ name: "d1", xAxis: d1!.toString() }],
            },
          },
          {
            name: "测试结果",
            type: "line",
            showSymbol: false,
            smooth: true,
            data: virtualResults,
            color: "#389e0d",
            itemStyle: {
              lineStyle: {
                width: 2,
              },
            },
            markLine: {
              symbol: ["none", "none"],
              data: [{ name: "d2", xAxis: d2!.toString() }],
            },
          },
        ],
      };
      const myChart = echarts.init(ref.current!);
      myChart.setOption(robOption);
      return () => {
        myChart.dispose();
      };
    }
  }, [d1, d2, realResults, title, type, virtualResults, xAxis]);

  return (
    <div
      ref={ref}
      style={{ width: 700, height: 360, position: "relative" }}
    ></div>
  );
}
